<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/problem.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="problem" v-loading.fullscreen.lock="fullscreenLoading" v-cloak>
    <a id="top"></a>
    <header class="head-top">
      <span style="font-size: 18px;font-weight:500; float: left;line-height: 60px;">问答</span>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        style="margin: auto;border-bottom: none; width: 25%;height:50px;display: flex;justify-content: space-between;background-color:rgba(0,0,0,0);gap: 10px;">
        <el-menu-item index="1" style="height: 50px;">最新</el-menu-item>
        <el-menu-item index="2" style="height: 50px;">待回答</el-menu-item>
        <el-menu-item index="3" style="height: 50px;">周榜</el-menu-item>
        <el-menu-item index="4" style="height: 50px;">月榜</el-menu-item>

      </el-menu>
      <el-row style="line-height: 60px;">
        
        <el-button @click="isLogin" type="primary">提问题</el-button>
      
      </el-row>
    </header>

    <main class="main-centre" style="height: 100%" >

      <ul style="list-style: none;height:100%;">
        <li v-for="(item,index) in tableData" class="table-data">
          <div class="main-problem">
            <div class="problem-left">
              <div class="main-answer-num">
                <span>{{item.answerCount}}</span>
                <span style="height: 5px"></span>
                <span>回答</span>
              </div>
              <div class="main-read-num">
                <span>{{item.readCount}}</span>
                <span style="height: 5px"></span>
                <span>阅读</span>
              </div>
            </div>
            <div class="problem-right">
              <div style="display: flex;flex-flow: column;gap: 5px;">
                <div class="problem-title">
                  <a  style="text-decoration: none;color: black; cursor:pointer;" @click="goAnswer(index)"><h3>{{item.title}}</h3></a>
                </div>
                <div style="display: flex;justify-content: right;">
                  <div class="problem-sender">
                    <span v-if="item.questioner">{{item.questioner.username}}</span>

                    <span style="margin-right: 20px;">{{item.createTime}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div style="margin:30px;text-align: center">
        <el-pagination
                ref="top"
                background
                @current-change="handleCurrentChange"
                :page-size="pageTool.pageSize"
                layout="prev, pager, next"
                :total="pageTool.pageTotal">
        </el-pagination>
      </div>

      <el-dialog
              title="问题发布"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
        <el-form ref="form" :model="problemForm" label-width="80px">
          <el-form-item label="问题标题" >
            <el-input
                    ref="problemTitle"
                    placeholder="请输入标题"
                    v-model.trim="problemForm.title"
                    clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="问题内容">
            <el-input
                    ref="problemContent"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model.trim="problemForm.content">
            </el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addProblem">确 定</el-button>
        </span>
      </el-dialog>
    </main>



  </div>
</body>
<script src="../js/vue/vue.js"></script>
<script src="../js/axios/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  var problem = new Vue({
    el: "#problem",
    data: {
      //默认打开页面
      dialogVisible:false,
      activeIndex: "1",
      id:"123456",
      message: "haha",
      tableData:[],
      problemForm:{
        title:'',
        content:'',
      },
      pageTool:{
        pageSize:30,
        pageNo:1,
        pageTotal:0,
      },


      input:"",
      //是否加载
      fullscreenLoading:false,
      timer:null,

    },

    methods: {
      //1.增
      addProblem(){
        if(this.problemForm.content.length == 0 || this.problemForm.title.length == 0){
          this.$message.warning("标题和内容不允许为空");
        }else {
          axios.post("http://localhost:8080/hkccommunity/problem/addProblem",this.problemForm)
                  .then(res =>{
                    if (res.data.code == 2021){
                      this.$message.success(res.data.message);
                      this.getProblem();
                      this.dialogVisible = false;
                    }else {
                      this.$message.warning(res.data.message);
                      this.dialogVisible = false;
                    }
                  })
                  .catch(err=>{
                    this.$message.error("500 系统错误，稍后再试")
                    console.log(err)
                  })
        }
      },
      //2.删
      //3.改
      //4.查
      //创建完成获取问题列表
      getProblem() {
        axios.get("http://localhost:8080/hkccommunity/problem/getProblem?pageNo=" + this.pageTool.pageNo + "&pageSize=" + this.pageTool.pageSize)
                .then(res =>{
                  if (res.data.code == 2011) {

                    this.tableData = res.data.data;
                    this.getCount();
                  } else {
                    this.$message.warning(res.data.message);
                  }
                  console.log(this.tableData);
                })
                .catch(err =>{
                  console.log(err)
                });
        this.timer = setTimeout(()=>{
          this.fullscreenLoading = false;
        },1000);

      },

      //公共方法
      handleMessage(event){
        console.log("启动")
        this.user = event.data.user;
        this.input = event.data.input;
        // console.log(event.data);
        // console.log(this.user);
        if(event.data.input != null && event.data.input != ""){
          axios.get("http://localhost:8080/hkccommunity/problem/search?input=" + event.data.input)
                  .then(res =>{
                    if (res.data.code == 2011) {
                      this.tableData = res.data.data;
                      this.getCount();
                    } else {
                      this.$message.warning(res.data.message);
                    }
                    console.log(this.tableData);
                  })
                  .catch(err =>{
                    console.log(err)
                  });
        }else {
          this.pageTool.pageSize = 30;
          this.pageTool.pageNo = 1;
          this.pageTool.pageTotal = 0;

          this.getProblem()
        }
      },

      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      },
      //是否登入
      isLogin(){
        axios.get("http://localhost:8080/hkccommunity/login/isLogin")
                .then(res =>{
                  if(res.data.code == 2021){
                    this.user = res.data.data;
                    this.circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                    this.dialogVisible = true;
                  }else {
                    this.$message(res.data.message);
                    this.dialogVisible = false;
                  }
                })
                .catch(err =>{
                  this.$message.error("500 系统出错，请联系管理员！！")
                  console.log(err);
                })
        this.dialogVisible = false;
      },

      //跳转
      goAnswer(index){
        console.log(this.tableData[index].problemId);
        axios.get("http://localhost:8080/hkccommunity/problem/updateReadCount?problemId=" + this.tableData[index].problemId)
                .then(res =>{
                  if (res.data.code != 20211){
                    console.log(res.data);
                    this.$messgae.error("500 系统错误！！！");
                  }
                })
                .catch(err =>{
                  console.log(err);
                })

        localStorage.setItem("problemDto",JSON.stringify(this.tableData[index]));
        location.href = "http://localhost:8080/hkccommunity/pages/answer.html";
      },
      //获取pageTool
      getCount(){
        axios.get("http://localhost:8080/hkccommunity/problem/getPageTool")
                .then(res =>{
                  this.pageTool.pageTotal = res.data;
                })
                .catch(err =>{
                  this.$message.error("500 服务器错误!!!")
                  console.log(err);
                })
      },

      //页码发生改变
      handleCurrentChange(val){
        this.timer = null;
        this.pageTool.pageNo = val;
        this.fullscreenLoading = true;
        this.getProblem();
        window.scroll(0,0);
        this.timer = setTimeout(()=>{
          this.fullscreenLoading = false;
        },1000);

      },



      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }

    },
    mounted(){

      this.fullscreenLoading = true;
      console.log(this.input);
      if(this.input == null || this.input == ""){
        this.getProblem();
      }
      window.addEventListener("message", this.handleMessage);

    }
  })
</script>

</html>